<template>
  <view-box ref="viewBox" body-padding-bottom="5px">
    <div class="donation-box">
      <div class="desc">
        <h2>天南山国学文化公益读书会</h2>
        <p>{{data}}</p>
        <flexbox>
          <flexbox-item>
            <x-button type="primary" @click.native="$router.push('/donate')">我要支持</x-button>
          </flexbox-item>
          <flexbox-item>
            <x-button type="warn" @click.native="$router.push('/donation/rank')">爱心榜</x-button>
          </flexbox-item>
        </flexbox>

      </div>
    </div>
     <card>
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{count.total_amount}}</span>
          <br/>
          总金额
        </div>
        <div>
          <span>{{count.total_number}}</span>
          <br/>
          众筹次数
        </div>
      </div>
    </card>
    <group label-width="6em" gutter="0">
      <selector  direction="rtl" ref="defaultValueRef" title="按月份检索" :options="monthList" v-model="params.month" @on-change="onChange" placeholder="请选择月份">
      </selector>
    </group>
    <x-table>
      <thead>
        <tr>
          <th>众筹人</th>
          <th @click="sort('amount')">金额 <i class="iconfont icon-sort-up-copy"></i></th>
          <th @click="sort('created_at')">日期 <i class="iconfont icon-sort-up-copy"></i></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(d, i) in list" :key="i">
          <td>{{d.user.name}}</td>
          <td>￥{{d.amount}}</td>
          <td>{{d.created_at.substr(0, 10)}}</td>
        </tr>
      </tbody>
    </x-table>
    <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
      <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
      <load-more slot="no-results" :show-loading="false" tip="暂无数据" background-color="#fbf9fe"></load-more>
    </infinite-loading>
  </view-box>
</template>
<script>
  import { ViewBox, XButton, XTable, Card, Group, Selector, Flexbox, FlexboxItem } from 'vux'
  export default {
    data () {
      return {
        list: [],
        data: null,
        count: {
          total_number: 0,
          total_amount: 0
        },
        params: {
          month: 0,
          order_type: 'desc',
          order_by: 'id'
        },
        monthList: [{key: 0, value: '全部'}, {key: 1, value: '1月'}, {key: 2, value: '2月'}, {key: 3, value: '3月'}, {key: 4, value: '4月'}, {key: 5, value: '5月'}, {key: 6, value: '6月'}, {key: 7, value: '7月'}, {key: 8, value: '8月'}, {key: 9, value: '9月'}, {key: 10, value: '10月'}, {key: 11, value: '11月'}, {key: 12, value: '12月'}]
      }
    },
    components: {
      ViewBox,
      XButton,
      XTable,
      Card,
      Group,
      Selector,
      Flexbox,
      FlexboxItem
    },
    mounted () {
      this._getStatistics()
      this._getData()
    },
    watch: {
      params: {
        deep: true,
        handler (newValue) {
          this.list = []
          this.$nextTick(() => {
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
          })
        }
      }
    },
    methods: {
      sort (by) {
        this.params.order_by = by
        this.params.order_type = this.params.order_type === 'desc' ? 'asc' : 'desc'
      },
      infiniteHandler ($state) {
        this.$http.get('/donations', {
          params: {
            page: this.list.length / 20 + 1,
            page_size: 20,
            month: this.params.month,
            order_by: this.params.order,
            order_type: this.params.order_type
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.list = this.list.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      },
      _getStatistics () {
        this.$http.get('donations/statistics').then((response) => {
          this.count = response.data
        })
      },
      _getData () {
        this.$http.get('/configs/byKey/donation_desc').then((response) => {
          this.data = response.data
        })
      },
      onChange (value) {
        this.params.month = value
      }
    }
  }
</script>
<style scoped lang="less">
  .donation-box {
    width: 100%;
    background: url(./images/bg.jpg);
    background-size: 100%;
    color: #fff;
    .desc {
      padding: 30px 20px;
      h2 {
        text-align: center;
      }
      p {
        padding: 20px 0;
        text-indent: 20px;
      }
    }
  }
  .card-demo-flex {
      display: flex;
    }
    .card-demo-content01 {
      padding: 10px 0;
    }
    .card-padding {
      padding: 15px;
    }
    .card-demo-flex > div {
      flex: 1;
      text-align: center;
      font-size: 12px;
    }
    .card-demo-flex span {
      color: #f74c31;
    }
</style>